<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    
    ES6 模块化 - DSRBLOG
    
  </title>
  

  
  
  <link href="atom.xml" rel="alternate" title="DSRBLOG" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/style.min.css">
  <link rel="stylesheet" href="asset/css/doc.css">
  <script src="asset/app.js"></script>


</head>

<body> <section class="ct-body">
	<div class="container">
		<div class="columns is-variable bd-klmn-columns is-4 is-centered">
			<div class="column is-four-fifths">
				<div class="post-body single-content">
					
					<h1 class="title">
						ES6 模块化
					</h1>


					<div class="media">
						
						
						<div class="media-content">
							<div class="content">
								<p>
									<span class="date">2022/09/27 15:57 下午</span>
									

									

									<br />
									<span class="tran-tags">Tags:</span>&nbsp;
									
									<a class="tag is-link is-light">#ES6新特性</a>
									

								</p>
							</div>
						</div>

					</div>
				</div>
				<article class="markdown-body single-content">
					<p>模块化是指将一个大的程序文件拆分成多个<strong>小文件（模块）</strong>，然后将小文件组合起来</p>
<h2><a id="%E6%A8%A1%E5%9D%97%E5%8C%96%E7%9A%84%E4%BC%98%E7%82%B9" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>模块化的优点</h2>
<ol>
<li>防止命名冲突（不同模块中的命名互不干扰）</li>
<li>代码复用（可以将功能封装成单独的模块）</li>
<li>高维护性（降低各个模块之间的耦合，方便升级和维护）</li>
</ol>
<h2><a id="%E6%A8%A1%E5%9D%97%E5%8C%96%E8%A7%84%E8%8C%83%E4%BA%A7%E5%93%81" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>模块化规范&amp;产品</h2>
<table>
<thead>
<tr>
<th style="text-align: center">规范</th>
<th style="text-align: center">对应产品</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">CommonJS</td>
<td style="text-align: center">NodeJS、Browserify</td>
</tr>
<tr>
<td style="text-align: center">AMD</td>
<td style="text-align: center">requireJS</td>
</tr>
<tr>
<td style="text-align: center">CMD</td>
<td style="text-align: center">seaJS</td>
</tr>
</tbody>
</table>
<h2><a id="%E6%A8%A1%E5%9D%97%E5%8C%96%E8%AF%AD%E6%B3%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>模块化语法</h2>
<p>模块功能主要由两个命令构成：<code>export</code>和<code>import</code></p>
<ul>
<li><code>export</code>：规定模块的对外接口</li>
<li><code>import</code>：输入其它模块提供的功能</li>
</ul>
<h2><a id="%E6%9A%B4%E9%9C%B2%E8%AF%AD%E6%B3%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>暴露语法</h2>
<h3><a id="%E9%80%82%E7%94%A8%E4%BA%8Ehtml%E6%96%87%E4%BB%B6" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>适用于HTML文件</h3>
<h4><a id="%E5%88%86%E5%88%AB%E6%9A%B4%E9%9C%B2" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>分别暴露</h4>
<p><strong>./module_1.js</strong></p>
<pre class="line-numbers"><code class="language-js">export let school = 'GDUST';

export function campus(){
    console.log('松山湖校区');
}
</code></pre>
<h4><a id="%E7%BB%9F%E4%B8%80%E6%9A%B4%E9%9C%B2" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>统一暴露</h4>
<p><strong>./module_2.js</strong></p>
<pre class="line-numbers"><code class="language-js">let school = 'GDUST';

function campus() {
    console.log('松山湖校区');
}

export { school, campus };
</code></pre>
<h4><a id="%E9%BB%98%E8%AE%A4%E6%9A%B4%E9%9C%B2" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>默认暴露</h4>
<ul>
<li>默认暴露的数据可以是任意类型</li>
<li>调用默认暴露的数据需要多加一层<code>.default</code></li>
</ul>
<p><strong>./module_3.js</strong></p>
<pre class="line-numbers"><code class="language-js">export default {
    school: 'GDUST',

    campus: function () {
        console.log('松山湖校区');
    }
}
</code></pre>
<h3><a id="%E5%BC%95%E5%85%A5%E8%AF%AD%E6%B3%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>引入语法</h3>
<h4><a id="%E9%80%9A%E7%94%A8%E5%AF%BC%E5%85%A5%E6%96%B9%E6%B3%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>通用导入方法</h4>
<p><strong>./index.html</strong></p>
<pre class="line-numbers"><code class="language-html">&lt;script type=&quot;module&quot;&gt;
    //引入module.js模块内容
    import * as module from &quot;./module_1.js&quot;;

    module.campus(); //输出 '松山湖校区'
&lt;/script&gt;
</code></pre>
<h4><a id="%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%E5%BD%A2%E5%BC%8F" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>解构赋值形式</h4>
<p><strong>./index.html</strong></p>
<pre class="line-numbers"><code class="language-html">&lt;script type=&quot;module&quot;&gt;
    //引入module.js模块内容
    import {school, campus} from &quot;./module_1.js&quot;;

    campus(); //输出 '松山湖校区'
&lt;/script&gt;
</code></pre>
<h4><a id="%E7%AE%80%E4%BE%BF%E5%BD%A2%E5%BC%8F" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>简便形式</h4>
<ul>
<li>针对默认暴露</li>
</ul>
<p><strong>./index.html</strong></p>
<pre class="line-numbers"><code class="language-html">&lt;script type=&quot;module&quot;&gt;
    //引入module.js模块内容
    import m3 from &quot;./module_3.js&quot;;

    m3.campus(); //输出 '松山湖校区'
&lt;/script&gt;
</code></pre>
<h3><a id="%E9%80%82%E7%94%A8%E4%BA%8Ejs%E6%96%87%E4%BB%B6" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>适用于JS文件</h3>
<p><strong>./index.html</strong></p>
<pre class="line-numbers"><code class="language-html">//引入入口文件
&lt;script src=&quot;./app.js&quot; type=&quot;module&quot;&gt;&lt;/script&gt;
</code></pre>
<p><strong>./app.js</strong></p>
<pre class="line-numbers"><code class="language-js">//模块引入
import * as m1 from './module_1';
import * as m2 from './module_2';
import * as m3 from './module_3';
</code></pre>
<h2><a id="babel%E5%AF%B9es6%E6%A8%A1%E5%9D%97%E5%8C%96%E8%AF%AD%E6%B3%95%E8%BD%AC%E6%8D%A2" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Babel对ES6模块化语法转换</h2>
<p><code>Babel</code>是<code>JavaScript</code>的编译器，可以将<code>ES6</code>以上的新特性转换为<code>ES5</code>的语法，适配老版本的浏览器</p>
<h3><a id="%E5%AE%89%E8%A3%85%E5%B7%A5%E5%85%B7" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>安装工具</h3>
<ul>
<li>babel-cli</li>
<li>babel-perset-env</li>
<li>browserify</li>
</ul>
<p><strong>采用全局安装</strong></p>
<pre class="line-numbers"><code class="language-shell">npm i -g babel-cli -D
npm i -g babel-perset-env -D
npm i -g broserify -D
</code></pre>
<h3><a id="%E8%BD%AC%E6%8D%A2%E4%B8%8E%E6%89%93%E5%8C%85" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>转换与打包</h3>
<h4><a id="%E8%BD%AC%E6%8D%A2%E4%BB%A3%E7%A0%81" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>转换代码</h4>
<pre class="line-numbers"><code class="language-plain_text">babel 输入目录 -d 输出目录 --presets=babel-preset-env
</code></pre>
<h4><a id="%E6%89%93%E5%8C%85" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>打包</h4>
<p>使用<code>browserify</code>进行打包</p>
<pre class="line-numbers"><code class="language-plain_text">browserify 入口文件路径 -o 输出路径
</code></pre>
<h2><a id="%E5%BC%95%E5%85%A5npm%E5%8C%85" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>引入NPM包</h2>
<pre class="line-numbers"><code class="language-js">import $ from 'jquery';
</code></pre>
<p>等同于</p>
<pre class="line-numbers"><code class="language-js">const $ =require(&quot;jquery&quot;);
</code></pre>

				</article>
				<div class="comments-wrap">
					<div class="share-comments">
						

						

						
					</div>
				</div><!-- end comments wrap -->
			</div>
		</div><!-- end columns -->
	</div><!-- end container -->
</section>  














<script src="asset/prism.js"></script>









</body>

</html>